{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="layui-form layui-form-item">
                            <div class="layui-col-md6 layui-input-inline">
                                <select name="day" lay-search="" class="layui-input">
                                    <option  value="2">小时</option>
                                    <option  value="1">天</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <button class="layui-btn" id="btn-search" lay-filter="lunbo_type">立即搜索</button>
                                <!--<button  class="layui-btn layui-btn-normal" id="empty">重置</button>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">下载</div>
                    <div class="layui-card-body">

                        <div id="main" style="width: auto;height:400px"></div>

                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">求赞求粉</div>
                    <div class="layui-card-body">

                        <div id="main2" style="width: auto;height:400px"></div>

                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">问卷</div>
                    <div class="layui-card-body">

                        <div id="main3" style="width: auto;height:400px"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">投票</div>
                    <div class="layui-card-body">

                        <div id="main4" style="width: auto;height:400px">
                        </div>

                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">视频</div>
                    <div class="layui-card-body">

                        <div id="main5" style="width: auto;height:400px">
                        </div>

                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">分享</div>
                    <div class="layui-card-body">

                        <div id="main6" style="width: auto;height:400px">
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/footer" /}
<script>
    $(document).ready(function(){
        ajaxList();

    });
//    layui.use(['form'],function () {
//        var form = layui.form
//        form.on('submit(lunbo_type)', function (data) {
//            ajaxList(data.field.day);
//        })
//    })
    $('#btn-search').click(function () {
        var day = $('select[name="day"]').val();
        ajaxList(day)
    })
    function ajaxList(day) {
        var day = day?day:2;
        $.ajax({
            url: "{:url('broken')}",
            type: "post",
            dataType: "json",
            data:{id:day},
            success: function (res) {
                columnPie(res.msg.time,'main','下载',res.msg.type_1);
                columnPie(res.msg.time,'main2','求赞求粉',res.msg.type_2);
                columnPie(res.msg.time,'main3','问卷',res.msg.type_3);
                columnPie(res.msg.time,'main4','投票',res.msg.type_4);
                columnPie(res.msg.time,'main5','视频',res.msg.type_5);
                columnPie(res.msg.time,'main6','分享',res.msg.type_6);
            }
        });
    }
        
    function columnPie(dataX,id,name,dataY) {
        var myChart = echarts.init(document.getElementById(id));
        option = {
//        title: {
//            text: '折线图堆叠'
//        },
//            tooltip: {
//                trigger: 'axis'
//            },
//            legend: {
//                data:['下载','求赞求粉','问卷','投票','视频','分享']
//            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            dataZoom: [
                {
                    show: true,
                },
                {
                    type: 'inside',
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 1,
                    height: '80%',
                    showDataShadow: false,
                    left: '96%'
                }
            ],
//            toolbox: {
//                feature: {
//                    saveAsImage: {}
//                }
//            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:name,
                    type:'line',
                    stack: '总量',
                    data:dataY
                }
//                {
//                    name:'求赞求粉',
//                    type:'line',
//                    stack: '总量',
//                    data:data.type_2
//                },
//                {
//                    name:'问卷',
//                    type:'line',
//                    stack: '总量',
//                    data:data.type_3
//                },
//                {
//                    name:'投票',
//                    type:'line',
//                    stack: '总量',
//                    data:data.type_4
//                },
//                {
//                    name:'视频',
//                    type:'line',
//                    stack: '总量',
//                    data:data.type_5
//                },
//                {
//                    name:'分享',
//                    type:'line',
//                    stack: '总量',
//                    data:data.type_6
//                }
            ]
        };
        myChart.setOption(option);

    }
    function aaa() {
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        myChart.setOption(option);

    }
</script>
</body>
</html>